<template>
  <view>
    <view
      class="imgTextNavModule"
      :style="{
        paddingTop: `${info.style.pTop * 2}rpx`,
        paddingLeft: `${info.style.pLeft * 2}rpx`,
        paddingRight: `${info.style.pRight * 2}rpx`,
        paddingBottom: `${info.style.pBottom * 2}rpx`,
        marginTop: `${info.style.mTop * 2}rpx`,
        marginLeft: `${info.style.mLeft * 2}rpx`,
        marginRight: `${info.style.mRight * 2}rpx`,
        marginBottom: `${info.style.mBottom * 2}rpx`,
        background: `${info.bgColor}`,
        borderRadius: `${info.blockRadius * 2}rpx`,
      }"
    >
      <view
        v-if="info.type == 1"
        :class="info.value.length > 5 ? 'info1' : 'info1 flex sa'"
        :style="{
          whiteSpace: `${info.value.length > 5 ? 'nowrap' : ''}`,
          overflowX: `${info.value.length > 5 ? 'scroll' : ''}`,
        }"
      >
        <view
          v-for="(items, index, key) in info.value"
          :key="key"
          class="navlist"
          :style="{ display: `${info.value.length > 5 ? 'inline-block' : ''}` }"
          @click="tabbarChange(items)"
        >
          <image
            :src="items.link"
            alt=""
            mode="aspectFill"
            :style="{
              width: `${info.size * 2}rpx`,
              height: `${info.size * 2}rpx`,
              borderRadius: `${info.radius * 2}rpx`,
            }"
          />
          <view
            class="tip1"
            :style="{
              color: `${info.color}`,
            }"
          >
            {{ items.name }}
          </view>
        </view>
      </view>
      <view
        v-if="info.type == 2"
        class="info1 flex sa"
        v-for="(items, index, key) in info.chunks"
        :key="key"
      >
        <view
          v-for="(itemss, index, keys) in items"
          :key="keys"
          class="navlist"
          @click="tabbarChange(itemss)"
        >
          <image
            :src="itemss.link"
            alt=""
            mode="aspectFill"
            :style="{
              width: `${info.size * 2}rpx`,
              height: `${info.size * 2}rpx`,
              borderRadius: `${info.radius * 2}rpx`,
            }"
          />
          <view
            class="tip1"
            :style="{
              color: `${info.color}`,
            }"
          >
            {{ itemss.name }}
          </view>
        </view>
        <view
          v-for="(itemss, index, keyss) in info.flex == 1
            ? 3 - items.length
            : info.flex == 2
            ? 4 - items.length
            : 5 - items.length"
          :key="keyss"
          class="navlist"
          @click="tabbarChange(itemss)"
        ></view>
      </view>
    </view>
  </view>
</template>

<script>
import { navigateTo } from "@/utils/navigateTo";
export default {
  props: {
    info: {
      default: {},
    },
  },
  mounted() {
    console.log(this.info);
  },
  methods: {
    tabbarChange(item) {
      navigateTo(item);
    },
  },
};
</script>

<style lang="scss" scoped>
.imgTextNavModule {
  .info1 {
    width: 100%;

    .navlist {
      // width: 136rpx;
      text-align: center;
      margin: 0 0 36rpx 0;

      image {
        width: 104rpx;
        height: 104rpx;
        object-fit: cover;
        margin: auto;
      }

      .tip1 {
        font-size: 24rpx;
        color: #333;
        margin-top: 8rpx;
      }
    }
  }
}
</style>
